<script setup lang="ts">
    import { reactive, ref} from 'vue'
    import CardTitle from '@/components/CardTitle.vue';
    import CardList from '@/components/CardList.vue';
    import { ElMessage} from 'element-plus'
    import FilePreview from '@/components/FilePreview.vue'

    const selectedItem = ref()

    const cardTitleParam = reactive({
        cardBgColor: "rgb(68, 114, 196)",
        fontColor:"#fff",
        titles: [
            { 'title': '项目编号'},
            { 'title': '项目名称' },
            { 'title': '经办人' },
            { 'title': '创建时间'},
            { 'title': '图片集'},
            { 'title': '视频集'},
            { 'title': '其他资料下载'},
        ]
    });
    
    const cardListParam = reactive({
        cardList: [
            {'projectCode':'YTQHBI231205013','name':'汕头国瑞非金债权','handle':'李小明','createTime':'2023-12-05 11:30','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205012','name':'鸿禧集团有限公司债权','handle':'陈强','createTime':'2023-12-05 11:25','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205011','name':'东恒珠宝首饰司债权','handle':'陈四','createTime':'2023-12-05 10:25','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205010','name':'天津钢管集团债权','handle':'李明','createTime':'2023-12-05 10:20','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205009','name':'湖南园康富力债权','handle':'周建','createTime':'2023-12-05 09:25','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205008','name':'易尚展示股份有限公司债权','handle':'蔡立','createTime':'2023-12-04 16:25','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205007','name':'贤丰控股集团有限公司债权','handle':'鲁立国','createTime':'2023-12-04 15:20','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205006','name':'大凡珠宝首饰有限公司债权','handle':'曹爽','createTime':'2023-12-04 14:25','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205005','name':'佳田制衣有限公司债权','handle':'陆林','createTime':'2023-12-04 11:32','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205004','name':'志高空调有限公司债权','handle':'邓维军','createTime':'2023-12-04 10:56','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205003','name':'榕泰实业股份有限公司债权','handle':'董艺琳','createTime':'2023-12-04 09:31','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205002','name':'联创煤炭有限公司债权','handle':'段凯','createTime':'2023-12-04 09:11','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
            {'projectCode':'YTQHBI231205001','name':'显微电子有限公司债权','handle':'付志明','createTime':'2023-12-03 09:27','imgs':'图片集','videos':'视频集','dataDownload':'相关附件清单.zip'},
        ],
        listField: ['projectCode','name', 'handle','createTime','imgs','videos','dataDownload'],
    })

    const collateralVisible = ref(false);

    const viewMapAction = ()=>{
        // console.log('selectedItem.currentItem')
        // console.log(checkItem.value.checkItem.vlaue)
        // console.log(checkItem.value.checkItem.vlaue.projectCode)

        if(!selectedItem.value.selectedItem.vlaue){
            //console.log('请选中一行数据')
            ElMessage({
                message:'请选中一行数据.',
                type: "info",
            });
            return;
        }
        console.log(selectedItem.value.selectedItem.vlaue.projectCode)

        collateralVisible.value = true;
    }

    const consultFilelVisible = ref(false);

    const viewFile = ()=>{

        if(!selectedItem.value.selectedItem.vlaue){
            //console.log('请选中一行数据')
            ElMessage({
                message:'请选中一行数据.',
                type: "info",
            });
            return;
        }
        console.log(selectedItem.value.selectedItem.vlaue.projectCode)
       
        consultFilelVisible.value = true;
    }

</script>

<template>
    <div class="d-flex justify-content-center">
        <div style="width: 70%;margin-bottom: 15px;" class="d-flex justify-content-end">
            <el-button type="primary">新建项目</el-button>
            <el-button :icon="'Location'" type="primary" @click="viewMapAction">查看地图实景</el-button>
            <el-button :icon="'View'" type="primary" @click="viewFile">远程查档阅卷</el-button>
            <el-button type="primary">资料上传</el-button>
            <el-button type="primary" >项目详情</el-button>
        </div>
        
    </div>
    <div style="min-height:540px;margin-bottom: 30px;">
        <CardTitle 
            :titles="cardTitleParam.titles" 
            :cardBgColor="cardTitleParam.cardBgColor"
            :fontColor="cardTitleParam.fontColor" 
        />
        <CardList :cardList="cardListParam.cardList" 
            :listField="cardListParam.listField"
            :isSelected="true"
            ref="selectedItem"
        />
    </div>

    <el-dialog v-model="collateralVisible"> <!-- width="70%" -->
        <div class="d-flex justify-content-between align-items-center" style="margin-top: -36px;margin-bottom: 20px;">
            <div style="background-color: #F2F2F2;padding: 8px 16px;font-size: 20px;width: max-content;">当前查看的抵押物: 深圳万基医疗园</div>
            <div style="background-color: rgb(68, 114, 196);color: #F2F2F2;padding: 6px 12px;border-radius: 8px;margin-right: 30px;cursor: pointer;">查看下一抵押物</div>
        </div>
        <video style="width:100%;" class="video-fluid video-sm-fluid video-md-fluid video-lg-fluid" loop="true" autoplay muted preload="" poster="">
            <source src="/bi_frontend/videos/wanji-20231204.mp4">
        </video>        
    </el-dialog>

    <el-dialog v-model="consultFilelVisible"> <!-- width="70%" -->
        <!-- 文件预览 -->
        <div class="fileView">
                <FilePreview fileUrl="/ecsFile/ab1419ca-e665-40fc-95ac-2ddd7a639ef8.docx"/>
            </div>      
    </el-dialog>
</template>

<style scoped>
    .fileView {
        height: 680px;
        overflow: scroll;
    }
    .el-button{
        background-color: rgb(68, 114, 196);
    }
</style>